<template>
  <div id="m5heade">
    <div class="m5zzzi">
      <div class="m5baar">
        <router-link to=""
          ><img src="../assets/img/fanhuijiantou.png" alt=""
        /></router-link>
        <h1>手机号转账</h1>
      </div>
      <div class="m5person-11">
        <div class="m5w1-1">
          收款人<input
            class="m5name0"
            type="text"
          
            value=""
          />{{ bsk }}
        </div>
        <div class="m5w2-2">
          收款卡号<input
        
            class="m5name"
            type="text"
            placeholder="  "
          />
          <p>{{ kh }}</p>
        </div>
      </div>
      <div class="m5person-1">
        <p class="m5w1-11">
          付款账号  {{ v.hideCardNum }} 
        </p>
        <p class="m5w1-11">
          余额 <span>{{ v.depositSum }}</span>
        </p>
      </div>
      <div class="m5money">
        <h3 class="m5money1">转账金额</h3>
        <span class="m5money11">￥</span>
        <input
          class="m5money-11"
          v-model="m5money"
          type="text"
          placeholder="0.01"
        />
        <p>大写金额</p>
      </div>
      <div class="m5postscript1">
        <p>转账附言 <input type="text" v-model="aa" /></p>
        <div class="m5yan2" id="m5yan2">转账</div>
        <button class="m5sheng" @click="shf">生活费</button>
        <button class="m5huan" @click="xyk">还信用卡</button>
        <button class="m5gong" @click="gz">工资</button>
      </div>

      <div class="m5bank2-2" @click="pass" id="anniu">下一步</div>

      <div class="m5wenzi">
        <span>风险提示：</span><br />
        <span
          >1.请勿轻易向陌生人收款人转账，谨防电信网络诈骗。做到“陌生电话勿轻信，对方身份要核清，家中隐私勿泄露,涉及钱财需小心，遇到事情勿惊慌，即时拨打110”。</span
        >
        <span
          >2.为了您的资金安全，请务必妥善保管银行卡号，密码等个人重要信息。</span
        >
        <span
          >3.我行提供多层级的安全认证方式供您使用，分别对应不同的转账限额，您可通过安全中心进行查看和设置。</span
        >
      </div>
    </div>

    <!-- 密码 -->
    <!-- 密码框   弹出层-->
    <van-dialog
      v-model="showa"
      show-cancel-button
      style="height: 350px"
      @confirm="confirm(v.hideCardNum)"
    >
      <van-password-input
        :value="value"
        :focused="showKeyboard"
        @focus="showKeyboard = true"
      />
      <!-- 数字键盘 -->
      <van-number-keyboard
        v-model="value"
        :show="showKeyboard"
        @blur="showKeyboard = true"
      />
    </van-dialog>
  </div>
</template>

<script>
import { Notify } from "vant";
import { Dialog } from "vant";
import { tran, trans } from "../api/Transfer2";
export default {
  data() {
    return {
     
      showKeyboard: true,
      showa: false,
      show: false,
      value: "",
      showKeyboard: true,
      passs: false,
      bsk: this.$route.params.skr,
      kh: this.$route.params.data,
      pas: "value",
      //钱
      m5money: "",
      //附言
      aa: "",

      v: [],
    };
  },
  created() {
    this.Tran1();
  },
  methods: {
   
    // confirm(){
    //   this.$router.push({
    //     name:"Operator"
    //   })
    // },
    shf() {
      this.aa = "生活费";
      console.log(this.bsk);
    },
    xyk() {
      this.aa = "还信用卡";
    },
    gz() {
      this.aa = "工资";
    },
    pass() {
      if (this.m5money == "") {
        Dialog({ title: "温馨提示", message: "转账金额不能为空" });
      }else{
        this.showa = true;
      }
      
    },
    confirm(res) {
      let tran1 = {
        payment: res,
        payee: this.kh,
        money: this.m5money,
        pas: this.value,
        described: this.aa,
        payeeName: this.bsk,
      };
      trans(tran1).then((res) => {
        console.log(res);
        if (res.code == 200) {
          if (this.pas == this.pas) {
            this.$router.push({
              name: "Operator",
            });
          }
        } else {
          Notify({ type: "warning", message: res.msg });
          if (res.msg == res.msg) {
            this.value = " "
          }
        }
      });
    },

    Tran1() {
      tran().then((res) => {
        if (res.code == 200) {
          console.log(res.data.data[0]);
          this.v = res.data.data[0];
        }else{
          Dialog({ title: "温馨提示", message: res.msg });

        }
      });
    },
  },
  //密码那个
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  //消息弹窗
  components: {
    [Notify.Component.name]: Notify.Component,
  },
};
</script>

<style   scoped src="../assets/css/transfer-2.css" ></style>

